<template>
  <div id="app">
    <main>
      <div class="video" v-if="this.listData.length!=0">
       
        <div v-for="item in listData" :key='item.unid' v-if='item.name == vname'>
          <my-video :sources="[{src: item.pathHLS,type:'video/mp4'}]" :options="video.options"></my-video>
        </div>
      <p class="video-infos"><i class="el-icon-menu"></i><label>请选择以下信号源</label></p>
        <ul>
          <li v-for="item in listData" :key='item.unid'>
            <div class="videoname" @click="videoitem(item.name)" :class='{videonameactive:item.name==showactive}'>{{item.name}}</div>
          </li>
        </ul>
       
      </div>
     
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    Vedio
  } from '../api/api'
  import myVideo from 'vue-video'
  import {
    Toast
  } from 'mint-ui';
  export default {
    components: {
      myVideo
    },
    data() {
      return {
        listData: [],
        vediosrc: '',
        showactive:'',
        video: {
          options: {
            volume: 0.6,
             poster: '../../static/img/vedio.png'
          }
        },
        vname: '',
      };
    },
    methods: {
      videoitem(vname) {
        let instance = Toast({
          message: '成功切换信号源',
          iconClass: 'el-icon-check'
        });
        setTimeout(() => {
          instance.close();
        }, 800)
        this.vname =vname;
        this.showactive=vname; 
      },
      getData() {
        let options = {
          params: {
            enterpriseUnid:"bf67bd2f02aa43fcab1a359f144639b4"
          }
        }
        //调取接口
        Vedio(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
            this.vediosrc = this.listData[0].pathHLS;
            this.vname = this.listData[0].name;
            this.showactive= this.vname;
          }
        })
      }
    },
    //页面加载时候
    created() {
      this.getData();
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .video {
    width: 100%;
    margin: 0px auto;
    ul {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        overflow: hidden;
        .videoname {
          background:rgba(97, 141, 204, 0.53);
          box-shadow: 0px 3px 12px #ccc;
          font-size: 1rem;
          color: #fff;
          margin: 1rem;
          padding: 8px 0px;
          text-align: center
        }
      }
    }
  }
  .videonameactive{
    background:#618dcc !important
  }
  .video-infos {
    background: #efefef;
    padding: 10px 0px;
    margin: 0px;
    i {
      padding: 0 .5rem 0 .8rem;
      vertical-align: inherit;
      color: #FF9800;
    }
    label {
      font-size: .8rem;
      color: #333;
    }
  }
  
  .container {
    width: 100%;
    background: #000
  }
</style>
